<%-- 
    Document   : ProductDetails
    Created on : Dec 10, 2013, 1:57:53 AM
    Author     : lyhoang
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page language="java"%>

<div class="main">
	<div class="thirteen columns">
		<br />
		<div class="product-info-box">
			<div class="product-essential">
				<div class="product-img-box">
					<p class="product-image-zoom">
						<img src="<c:url value="${product.linkImage}"/>" alt="Image"
							title="Image" />
					</p>
				</div>

				<div class="product-shop">
					<h3 class="product-name">${product.productname}</h3>
					<div class="price-box">
						<span class="price">${product.price}</span> <span
							class="availability"></span>
					</div>
					<!--The hien nhom san pham cho nay`-->
					<div class="price-box">
						<span class="price">Số Lượng: ${product.quantity}</span>
					</div>
					<div class="price-box">
						<span class="price">Nhóm: ${product.catalog.catalogname}</span>
					</div>
					<div class="price-box">
						<span class="price">Khuyến Mãi: ${product.promotion.discount} %</span>
					</div>
					<div class="price-box">
						<span class="price">Lượt xem: ${product.productdetail.view}</span>
					</div>
					<div class="model-block">
						<p>
							<span>Thông Tin: </span> ${product.productdetail.detail}
						</p>
					</div>
					<div class="price-box">
						<span class="price">Điểm: </span>
						<ul class="rating">

							<li><a href="#" title="1 Star">1</a></li>

							<li><a href="#" title="2 Stars">2</a></li>

							<li><a href="#" title="3 Stars">3</a></li>

							<li><a href="#" title="4 Stars">4</a></li>

							<li><a href="#" title="5 Stars">5</a></li>
						</ul>
					</div>
					<form action="addtocart.do" method="get">
						<div class="add-to-cart-box">
							<span class="qty-box"> <label for="qty">Số lượng
									đặt:</label> <a href="javascript:void(0)" title="" class="prev add"><img
									src="images/qty_prev.png" title="" alt="add" />‹</a> <input
								type="text" name="tbQuantity" value="1" maxlength="12" id="qty"
								class="input-text qty" name="qty"> <a
								href="javascript:void(0)" title="" class="next dec add"><img
									src="images/qty_next.png" title="" alt="" />›</a>
							</span> <input hidden="true" name="tbidProduct"
								value="${product.idproduct}" />
							<!--Thuc hien viec them bot so luong dat -->
							<script type="text/javascript">
								jQuery(function() {
									jQuery(".add")
											.click(
													function() {
														var jQueryadd = jQuery(this);
														var oldValue = jQueryadd
																.parent()
																.find("input")
																.val();
														var newVal = 0;

														if (jQueryadd.text() == "›") {
															newVal = parseFloat(oldValue) + 1;
															// AJAX save would go here
														} else {
															// Don't allow decrementing below zero
															if (oldValue >= 1) {
																newVal = parseFloat(oldValue) - 1;
																// AJAX save would go here
															}
															if (oldValue == 0) {
																newVal = parseFloat(oldValue);
															}
														}
														jQueryadd.parent()
																.find("input")
																.val(newVal);
													});
								});
							</script>
							<input type="submit" name="Addtocart" class="form-button"
								title="Add to Cart" value="Add to cart">
							<ul class="add-to-box">
								<li><a href="#" title="Add to Wishlist"
									class="add-wishlist">Add to compare</a></li>
							</ul>
						</div>
					</form>
				</div>
			</div>
		</div>
		<div class="row"></div>

		<!--Them cac san pham co lien quan o day-->
		<!--Bieu tuong phan trang-->
		<div class="heading-block">
			<h1>Freatured Products</h1>
			<ul class="pagination">
				<li class="grid"><a href="#" title="Grid">Grid</a></li>
			</ul>
		</div>
		<!--End Bieu tuong phan trang-->

		<!--Freatured Products-->
		<div class="feature-block">
			<ul class="product-grid">
				<li>
					<div class="pro-img">
						<img title="Freature Product" alt="Freature Product"
							src="images/default_img.png" />
					</div>
					<div class="pro-hover-block">
						<h4 class="pro-name">Htc One 1120</h4>
						<div class="link-block">
							<a href="#quick-view-container" class="quickllook inline"
								title="Quick View">Quick View</a> <a href="view.html"
								class="quickproLink" title="Link">Product link</a>
						</div>
						<div class="pro-price">$600.00</div>
					</div>
				</li>
			</ul>
		</div>
		<!--End Freatured Products-->


		<!--===================== Giao dien phan comment ==============================-->

		<!--viet Ajax -->
		<script type="text/javascript">
			function getComment() {
				var username = $('#usernameComment').val();
				var product = $('#idproductComment').val();
				var comment = $('#txtMessage').val();

				if (username == "/") {
					alert("Please Login or Register to comment!");
				} else {
					if (comment == '') {
						alert("Please input comment!");
					} else {
						$
								.ajax({
									type : "POST",
									url : "AjaxComment.do",
									data : "username=" + username
											+ "&idproduct=" + product
											+ "&message=" + comment,
									dataType : "JSON",
									// add comment thanh cong
									success : function(commentInfo) {
										// xoa noi dung text di
										$('#txtMessage').val('');
										//them noi dung comment vao day
										$(
												'<li class="postHolder"><img src="<c:url value="/resources/images/comment.jpg" />" /><p><a href="'+commentInfo.linkFacebook+'">'
														+ commentInfo.username
														+ '</a>: <span>'
														+ commentInfo.message
														+ '</span></p><span class="timeago">'
														+ commentInfo.dateCreated
														+ '</span>&nbsp</li>')
												.appendTo('#msgHolder');

										// dung de chuyen trang trong ajax
										//window.location.href='<c:url value='j_spring_security_check' />';
// 										$('#f').submit(function() 
// 										{
// 											return true;
// 										});
									},
									// loi~
									error : function(e) {
										alert('Error: ' + e);
									}
								});
					}
				}
			};
		</script>

		<div class="heading-block">
			<h1 id="CommentTitle">Comment Please...</h1>
			<!-- Them cai nay de lay thong tin comment cho ajax -->
			<input type="hidden" id="usernameComment"
				value=${sessionScope.username} /> 
				<input type="hidden"
				id="idproductComment" value=${product.idproduct } />
				
		</div>

		<form>
			<!--Phan comment-->
			<div class="feature-block">

				<!--Main comment-->
				<div class="row">
					<div class="publishContainer">
						<textarea class="msgTextArea" id="txtMessage" name="tbMessage"
							placeholder="What's on your mind?"></textarea>
						<input type="button" value="Share" class="btnComment"
							onclick="getComment()">
					</div>
				</div>
				<!--Giao dien comment-->
				<div class="row">
					<ul id="msgHolder">
						<c:forEach var="p" items="${comments}">
							<li class="postHolder">
								<!--Comment Main--> <img
								src="<c:url value="/resources/images/comment.jpg" />" />
								<p>
									<a href="${p.account.accountInfo.linkFacebook}">${p.account.username}</a>: <span>${p.text}</span>
								</p> <span class="timeago">${p.datecreated}</span>&nbsp;
							</li>
						</c:forEach>
					</ul>
				</div>
			</div>
			<!--End comment  -->
		</form>
		<!-- End form -->
	</div>
</div>